var ECharts;
jQuery(function ($) {
    require.config({
        baseUrl: ctx + '/resource/plugins/echarts4',
        paths: {
            echarts: 'echarts',
            roma: 'theme/roma'
        }
    });
    require(
        [
            'echarts',
            'roma'
        ],
        function (ec) {
            ECharts = ec;
            resourceTop = ECharts.init(document.getElementById('resourceTop'), 'roma');
            queryResourceTop();
            resourceTopClass = ECharts.init(document.getElementById('resourceTopClass'), 'roma');
            queryAlarmClassByResource();
        }
    );
});
//资源柱图
function queryResourceTop(DATE_TYPE) {
    resourceTop.clear();
    $.ajax({
        url: ctx + "/alarmAnalysis/queryResourceTop",
        type: "post",
        data: {DATE_TYPE: DATE_TYPE},
        success: function (data) {
            var list = JSON.parse(data);
            var xdata = [];
            var ydata = [];
            if (list != null && list.length != 0) {
                for (var i = 0; i < list.length; i++) {
                    xdata.push(list[i].CI_NAME);
                    ydata.push({value: list[i].ALARM_COUNT, extUnitId: list[i].EXT_UNIT_ID, unitName: list[i].CI_NAME});
                }
            }

            option = {
                legend: {
                    orient: 'horizontal',
                    itemGap: 10,
                    itemWidth: 12,
                    itemHeight: 12,
                    data: ['资源告警总数']
                },
                color: ['#3398DB'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: xdata,
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLabel: {
                            interval: 0,
                            rotate: 45,
                            formatter: function (value) {
                                var ret = "";//拼接加\n返回的类目项
                                var maxLength = 15;//每项显示文字个数
                                var valLength = value.length;//X轴类目项的文字个数
                                var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
                                if (rowN > 1)//如果类目项的文字大于3,
                                {
                                    for (var i = 0; i < rowN; i++) {
                                        var temp = "";//每次截取的字符串
                                        var start = i * maxLength;//开始截取的位置
                                        var end = start + maxLength;//结束截取的位置
                                        //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                                        temp = value.substring(start, end) + "\n";
                                        ret += temp; //凭借最终的字符串
                                    }
                                    return ret;
                                }
                                else {
                                    return value;
                                }
                            }
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '告警总数'
                    }
                ],
                series: [
                    {
                        name: '资源告警总数',
                        type: 'bar',
                        barWidth: '60%',
                        itemStyle: {
                            normal: {
                                color: new ECharts.graphic.LinearGradient(
                                    0, 0, 0, 1,
                                    [
                                        {offset: 0, color: '#acc7f6'},
                                        {offset: 0.5, color: '#5eadf0'},
                                        {offset: 1, color: '#3621f0'}
                                    ]
                                )
                            }
                        },
                        data: ydata
                    }
                ]
            };
            resourceTop.setOption(option);
            //初始化加载饼图
            var extUnitId = list[0].EXT_UNIT_ID;
            var unitName = list[0].CI_NAME;
            queryAlarmClassByResource(extUnitId, unitName, DATE_TYPE);
            //柱图点击事件
            resourceTop.on('click', function (params) {
                var extUnitId = params.data.extUnitId;
                var unitName = params.data.unitName;
                resourceTopClass.clear();
                queryAlarmClassByResource(extUnitId, unitName, DATE_TYPE);
            });
        }
    });
}
//资源饼图
function queryAlarmClassByResource(extUnitId, unitName, DATE_TYPE) {
    resourceTopClass.clear();
    $.ajax({
        url: ctx + "/alarmAnalysis/queryAlarmClassByResource",
        type: "post",
        data: {EXT_UNIT_ID: extUnitId, DATE_TYPE: DATE_TYPE},
        success: function (data) {
            var list = JSON.parse(data);
            var serious = 0;
            var important = 0;
            var general = 0;
            if (list.length > 0) {
                for (var i = 0; i < list.length; i++) {
                    if (list[i].EVENT_CLASS == 1) {
                        serious = list[i].EVENTCOUNT;
                    }
                    if (list[i].EVENT_CLASS == 2) {
                        important = list[i].EVENTCOUNT;
                    }
                    if (list[i].EVENT_CLASS == 3) {
                        general = list[i].EVENTCOUNT;
                    }
                }
            }
            option = {
                title: {
                    text: unitName,
                    subtext: '告警级别占比',
                    itemGap: 10,
                    x: 'center',
                    /*left: '40',*/
                    textStyle: {
                        fontSize: 13
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                color: ['#F90000', '#F9AE00', '#0081F9'],
                legend: {
                    /*orient: 'vertical',*/
                    top: 45,
                    right: '17%',
                    itemGap: 10,
                    /*itemWidth: 12,
                     itemHeight: 12,*/
                    data: ['严重告警', '重要告警', '一般告警']
                },
                series: [
                    {
                        name: '资源告警级别',
                        type: 'pie',
                        hoverOffset: 5,
                        radius: '70%',
                        center: ['55%', '55%'],
                        data: [
                            {value: serious, name: '严重告警'},
                            {value: important, name: '重要告警'},
                            {value: general, name: '一般告警'}
                        ],
                        itemStyle: {
                            normal: {
                                label: {
                                    show: false   //隐藏标示文字
                                },
                                labelLine: {
                                    show: false   //隐藏标示线
                                }
                            }
                        }
                    }
                ]
            };
            resourceTopClass.setOption(option);
            resourceTopClass.off('click');
            resourceTopClass.on('click', function (params) {
                var key = params.name;
                var eventClass = 0;
                if ('严重告警' == key) {
                    eventClass = 1;
                }
                if ('重要告警' == key) {
                    eventClass = 2;
                }
                if ('一般告警' == key) {
                    eventClass = 3;
                }
                queryDetails(extUnitId, eventClass, DATE_TYPE, 100, 0);
                $.launchDialog('tbEventClassModal');
            });
        }
    });

}
//告警时间线
function queryDetails(extUnitId, eventClass, DATE_TYPE, ROWNUM, ROW_ID) {
    $.ajax({
            url: ctx + "/alarmAnalysis/queryDetails",
            type: "post",
            async: false,
            data: {
                EXT_UNIT_ID: extUnitId,
                eventClass: eventClass,
                DATE_TYPE: DATE_TYPE,
                ROWNUM: ROWNUM,
                ROW_ID: ROW_ID
            },
            success: function (data) {
                var hashMap = JSON.parse(data);
                var list = hashMap.list;
                var map = hashMap.resultMap;
                var timeLineHtml = '';
                $("#timeLine").empty();
                if (Object.getOwnPropertyNames(map).length > 0) {
                    //遍历map,动态赋值
                    for (var key in map) {
                        var mapValue = map[key];
                        timeLineHtml +=
                            "<div class='timeline-container timeline-style2'>" +
                            "<span class='timeline-label' style='width: 7.9%'>" +
                            "<b>" + key + "</b>" +
                            "</span>" +
                            "<div class='timeline-items'>";
                        for (var k = 0; k < mapValue.length; k++) {
                            var str = mapValue[k].GENERANT_TIME;
                            var timeRes = str.trim().split(/\s+/);
                            timeLineHtml +=
                                "<div class='timeline-item clearfix'>" +
                                "<div class='timeline-info'>" +
                                "<span class='timeline-date'>" + timeRes[1] + "</span>" +
                                "<i class='timeline-indicator btn btn-success no-hover'></i>" +
                                "</div>" +

                                "<div class='widget-box transparent'>" +
                                "<div class='widget-body'>" +
                                "<div class='widget-main no-padding'>";
                            if (mapValue[k].EVENT_CLASS == 1) {
                                timeLineHtml += "<span class='bolder red'>" + '严重告警' + "</span>";
                            } else if (mapValue[k].EVENT_CLASS == 2) {
                                timeLineHtml += "<span class='bolder orange'>" + '重要告警' + "</span>";
                            } else if (mapValue[k].EVENT_CLASS == 3) {
                                timeLineHtml += "<span class='bolder blue'>" + '一般告警' + "</span>";
                            }
                            timeLineHtml += '&nbsp&nbsp&nbsp'
                                + mapValue[k].EVENT_TITLE +
                                "</div>" +
                                "</div>" +
                                "</div>" +
                                "</div>";
                        }
                        timeLineHtml +=
                            "</div>" +
                            "</div>";
                    }
                    if (list.length == 100) {
                        var rownum = ROWNUM + 100;
                        var row_id = ROW_ID + 100;
                        timeLineHtml += "<div class='widget-main no-padding'>" +
                            "<span style='cursor: pointer ' class='bolder blue' onclick='queryDetails(\"" + extUnitId + "\",\"" + eventClass + "\",\"" + DATE_TYPE + "\",\"" + rownum + "\",\"" + row_id + "\")'>更多</span></div>";
                    }
                } else {
                    timeLineHtml += "<div class='timeline-container timeline-style2'>" +
                        "<span class='timeline-label' style='width: 8.5%'>" +
                        "<b>" + '暂无数据显示' + "</b>" +
                        "</span>" +
                        "</div>";
                }
                $("#timeLine").append(timeLineHtml);
            }
        }
    );
}
//下拉框事件
$("#timeHorizon").change(function () {
    var timeParam = $("#timeHorizon").val();
    queryResourceTop(timeParam);
});
//echarts自适应div
window.addEventListener("resize", function () {
    resourceTop.resize();
    resourceTopClass.resize();
});
